<template>
  <div style="margin-top: 80px">
    <div class="big" >找回账户</div>
    <el-divider></el-divider>
    <div class="small">请填写账户相关信息</div>
    <div style="margin-top: 50px">
      <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
        <el-form-item prop="email">
          <div >
            <el-input style="width: 400px" v-model="form.email"  type="text" placeholder="邮箱">
              <template #prefix>
                <el-icon ><Message /></el-icon>
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="code">
          <div>
            <el-row :gutter="10" >
              <el-col :span="17">
                <el-input style="width: 290px" v-model="form.code" type="email" placeholder="请输入邮箱验证码">
                  <template #prefix>
                    <el-icon><Bell /></el-icon>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-button @click="validateEmail" type="primary" style="margin-left: 7px" :disabled="!isEmailValid">获取验证码</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 50px">
      <el-button @click="router.push('/')" type="primary" style="margin-right: 100px" >返回登录</el-button>
      <el-button type="success" @click="reset" >立即重置</el-button>
    </div>
  </div>
</template>

<script setup>
import {Message} from "@element-plus/icons-vue";
import router from "@/router";
import {reactive, ref} from "vue";
import {isValid} from "js-base64";
import {ElMessage} from "element-plus";
import {post} from "@/net";

const form = reactive({
  email:'',
  code:''
});
const isEmailValid = ref( false)
const formRef=ref()



const rules = {
  email:[
    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
    {type: 'email', message: '请输入合法的邮件地址', trigger: ['blur', 'change']},
  ],
  code:[
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {min:4,max:18 ,message: '请输入正确的验证码', trigger: ['blur', 'change']},
  ]
};
const reset=()=>{
  formRef.value.validate((isValid) => {
    if(isValid){
      router.push('reset')
    }else {
      ElMessage.warning('请完整填写表单内容')
    }
  })
};
const  onValidate = (prop,isValid) =>{
  if(prop ==='email')
    isEmailValid.value=isValid;

};
const validateEmail = () => {
  post('api/auth/valid-email',{
    email: form.email
  },(message)=>{
    ElMessage.success(message)
  })
};
</script>

<style scoped>

</style>
